<template>
  <div class="envpicker">
    <div class="envpicker-wrapper">
      <div class="envpicker-header">
        <span class="title">
          <i class="icon icon-time"></i>
          时刻
        </span>
        <div class="extra">
          <span class="text">实时</span>
          <i-switch v-model="syncFlag.time" @on-change="syncTime"></i-switch>
        </div>
      </div>
      <div class="envpicker-body">
        <Slider
          v-model="dataManualSet.time"
          style="padding: 0 12px"
          :step="1"
          :min="0"
          :max="24"
          :marks="marks.time"
          @on-change="setTime"
          show-tip="never"
        ></Slider>
      </div>
      <div class="envpicker-header">
        <span class="title">
          <i class="icon icon-season"></i>
          季节
        </span>
        <div class="extra">
          <span class="text">实时</span>
          <i-switch
            v-model="syncFlag.season"
            @on-change="syncSeason"
          ></i-switch>
        </div>
      </div>
      <div class="envpicker-body">
        <Slider
          v-model="dataManualSet.season"
          style="padding: 0 12px"
          :step="0.25"
          :min="0"
          :max="0.75"
          :marks="marks.season"
          show-tip="never"
          @on-change="setSeason"
        ></Slider>
      </div>
      <div class="envpicker-header" v-if="false">
        <span class="title">
          <i class="icon icon-calendar"></i>
          年份
        </span>
        <div class="extra">
          <span class="text">实时</span>
          <i-switch v-model="syncFlag.year" @on-change="syncYear"></i-switch>
        </div>
      </div>
      <div class="envpicker-body" v-if="false">
        <Slider
          v-model="dataManualSet.year"
          style="padding: 0 12px"
          :step="0.05"
          :min="0.25"
          :max="1"
          :marks="marks.year"
          show-tip="never"
          @on-change="setYear"
        ></Slider>
      </div>
      <div class="envpicker-header">
        <span class="title"> <i class="icon icon-weather"></i>天气 </span>
        <div class="extra">
          <span class="text">实时</span>
          <i-switch
            v-model="syncFlag.weather"
            @on-change="syncWeather"
          ></i-switch>
        </div>
      </div>
      <div class="envpicker-body">
        <RadioGroup v-model="dataManualSet.weather" @on-change="setWeather">
          <Radio label="Sunny">
            <i class="icon icon-weather-sunny"></i>
            <span class="text">晴</span>
          </Radio>
          <Radio label="Overcast">
            <i class="icon icon-weather-darken"></i>
            <span class="text">阴</span>
          </Radio>
          <Radio label="Cloudy">
            <i class="icon icon-weather-cloudy"></i>
            <span class="text">多云</span>
          </Radio>
          <Radio label="Foggy">
            <i class="icon icon-weather-fog"></i>
            <span class="text">雾</span>
          </Radio>
          <Radio label="LightRain">
            <i class="icon icon-weather-little-rainy"></i>
            <span class="text">小雨</span>
          </Radio>
          <Radio label="ModerateRain">
            <i class="icon icon-weather-medium-rainy"></i>
            <span class="text">中雨</span>
          </Radio>
          <Radio label="HeavyRain">
            <i class="icon icon-weather-heavy-rainy"></i>
            <span class="text">大雨</span>
          </Radio>
          <Radio label="Haze">
            <i class="icon icon-weather-haze"></i>
            <span class="text">霾</span>
          </Radio>
          <Radio label="LightSnow">
            <i class="icon icon-weather-little-snowy"></i>
            <span class="text">小雪</span>
          </Radio>
          <Radio label="ModerateSnow">
            <i class="icon icon-weather-medium-snowy"></i>
            <span class="text">中雪</span>
          </Radio>
          <Radio label="HeavySnow">
            <i class="icon icon-weather-heavy-snowy"></i>
            <span class="text">大雪</span>
          </Radio>
          <Radio label="HeavySnow">
            <i class="icon icon-weather-blizzard"></i>
            <span class="text">暴雪</span>
          </Radio>
        </RadioGroup>
      </div>
    </div>
  </div>
</template>

<script>
import { clone } from "@/lib/extension";
export default {
  name: "",
  data() {
    return {
      dataWeather: {
        weatherName: null,
        weather: null,
        temperature: 0,
      },
      now: { date: null, time: null },
      dataManualSet: {
        time: null,
        season: null,
        year: null,
        weather: null,
      },
      syncFlag: {
        time: false,
        season: false,
        year: false,
        weather: false,
      },
      autoTick: {
        time: null,
        season: null,
        year: null,
        weather: null,
      },
      marks: {
        time: {
          0: {
            label: this.$createElement("span", "0"),
          },
          6: {
            label: this.$createElement("span", "6"),
          },
          12: {
            label: this.$createElement("span", "12"),
          },
          18: {
            label: this.$createElement("span", "18"),
          },
          24: {
            label: this.$createElement("span", "24"),
          },
        },
        season: {
          0: {
            label: this.$createElement("span", "春"),
          },
          0.25: {
            label: this.$createElement("span", "夏"),
          },
          0.5: {
            label: this.$createElement("span", "秋"),
          },
          0.75: {
            label: this.$createElement("span", "冬"),
          },
        },
        year: {
          0.25: {
            label: this.$createElement("span", "5年"),
          },
          0.5: {
            label: this.$createElement("span", "10年"),
          },
          0.75: {
            label: this.$createElement("span", "15年"),
          },
          1: {
            label: this.$createElement("span", "20年"),
          },
        },
      },
    };
  },
  created() {
    this.getLiveWeatherData();
  },
  mounted() {},
  methods: {
    getLiveWeatherData() {
      let $this = this;
      AMap.plugin("AMap.Weather", () => {
        let weather = new AMap.Weather();
        //广阳岛在重庆南岸区
        let code = "500108";
        let weatherNameHash = {
          晴: "Sunny",
          多云: "Cloudy",
          阴: "Overcast",
          雨: "ModerateRain",
          大雨: "HeavyRain",
          小雨: "LightRain",
          阵雨: "LightRain",
          暴雨: "HeavyRain",
          大暴雨: "HeavyRain",
          特大暴雨: "HeavyRain",
          强阵雨: "HeavyRain",
          雷阵雨: "HeavyRain",
          雪: "ModerateSnow",
          阵雪: "LightSnow",
          小雪: "LightSnow",
          中雪: "ModerateSnow",
          大雪: "HeavySnow",
          暴雪: "HeavySnow",
        };
        // let weatherNameHash = {
        //   晴: "Sunny",
        //   多云: "cloudy",
        //   阴: "darken",
        //   雨: "medium-rainy",
        //   大雨: "heavy-rainy",
        //   小雨: "little-rainy",
        //   阵雨: "little-rainy",
        //   暴雨: "heavy-rainy",
        //   大暴雨: "heavy-rainy",
        //   特大暴雨: "heavy-rainy",
        //   强阵雨: "heavy-rainy",
        //   雷阵雨: "heavy-rainy",
        //   雪: "medium-snowy",
        //   阵雪: "little-snowy",
        //   小雪: "little-snowy",
        //   中雪: "medium-snowy",
        //   大雪: "heavy-snowy",
        //   暴雪: "blizzard",
        // };
        weather.getLive(code, (err, data) => {
          this.dataWeather.temperature = data.temperature;
          this.dataWeather.weather = weatherNameHash[data.weather];
          this.dataWeather.weatherName =
            "icon-weather-" + weatherNameHash[data.weather];
          let emitData = clone(this.dataWeather);
          $this.$emit("weather-data-updated", emitData);
          if (this.syncFlag.weather) {
            this.setWeatherFn(this.dataWeather.weather);
          }
        });
      });
    },
    syncTime() {
      if (this.autoTick.time) {
        clearInterval(this.autoTick.time);
      }
      const tickFunction = () => {
        let now = new Date();
        this.now.date = `${now.getFullYear()}/${
          now.getMonth() + 1
        }/${now.getDate()}`;
        this.now.time = `${
          now.getHours() < 10 ? "0" + now.getHours() : now.getHours()
        }:${now.getMinutes() < 10 ? "0" + now.getMinutes() : now.getMinutes()}`;
        this.dataManualSet.time = now.getHours();
        if (this.syncFlag.time) {
          this.setTimeFn(this.now.time);
        }
      };
      tickFunction();
      this.autoTick.time = setInterval(() => {
        if (this.syncFlag.time) {
          tickFunction();
        }
      }, 60 * 1000);
      if (!this.syncFlag.time) {
        this.dataManualSet.time = 15;
        this.setTimeFn("15:00");
      }
    },
    syncSeason() {
      if (this.autoTick.season) {
        clearInterval(this.autoTick.season);
      }
      //季节，每24小时同步一次。PS：实际上1个月同步一次都可以。
      const tickFunction = () => {
        //TODO: 需要接入真实数据来判断现在这个月是哪个季节，不要拿new Date去判断，每年都TM不一样
        //TODO: 需要调用季节的非标API
        let now = new Date();
        let month = now.getMonth() + 1;
        let monthObj = {
          1: 0,
          2: 0,
          3: 0,
          4: 0.25,
          5: 0.25,
          6: 0.25,
          7: 0.5,
          8: 0.5,
          9: 0.5,
          10: 0.75,
          11: 0.75,
          12: 0.75,
        };
        this.dataManualSet.season = monthObj[month];
        console.log("month", month);
        if (this.syncFlag.season) {
          this.setSeasonFn(`${this.dataManualSet.season}`);
        }
      };
      tickFunction();
      this.autoTick.season = setInterval(() => {
        if (this.syncFlag.season) {
          tickFunction();
        }
      }, 24 * 3600 * 1000);
      if (!this.syncFlag.season) {
        this.dataManualSet.season = 0;
         this.setSeasonFn("0");
      }
    },
    syncYear() {
      //TODO: 调用非标API，直接设年份值为0
    },
    syncWeather() {
      if (this.syncFlag.weather) {
        this.dataManualSet.weather = "";
      } else {
        this.dataManualSet.weather = "Sunny";
        this.setWeatherFn("Sunny");
      }
      if (this.autoTick.weather) {
        clearInterval(this.autoTick.weather);
      }
      //天气，每30分钟同步一次
      const tickFunction = () => {
        this.getLiveWeatherData();
        //TODO:调用天气的非标API
      };
      tickFunction();
      this.autoTick.weather = setInterval(() => {
        if (this.syncFlag.weather) {
          tickFunction();
        }
      }, 30 * 60 * 1000);
    },
    setTime(time) {
      this.syncFlag.time = false;
      clearInterval(this.autoTick.time);
      let manualTime = time < 10 ? `0${time}:00` : `${time}:00`;
      this.setTimeFn(manualTime);
    },
    setWeather(weather) {
      this.syncFlag.weather = false;
      clearInterval(this.autoTick.weather);
      this.setWeatherFn(this.dataManualSet.weather);
      //TODO: 接入非标API
    },
    setSeason() {
      this.syncFlag.season = false;
      clearInterval(this.autoTick.season);
      this.setSeasonFn(`${this.dataManualSet.season}`);
      //TODO: 接入非标API
    },
    // setYear() {
    //   this.syncFlag.year = false;
    //   clearInterval(this.autoTick.year);
    //   //TODO: 接入非标API
    // },
    setWeatherFn(weather) {
      console.log(weather);
      window.cloudRender.SuperAPI("SetEnvWeather", { env_weather: weather });
    },
    setTimeFn(time) {
      console.log(time);
      window.cloudRender.SuperAPI("SetEnvTime", { env_time: time });
    },
    setSeasonFn(season) {
      console.log(season);
      this.$anyInterface("API_SeasonControlActor", "SeasonSlide", "", season);
    },
  },
};
</script>

<style lang="" scoped>
</style>